<template>
	<view>
		<view class="bg-image" :style="bgStyle"></view>
		<view class="song-list">
			<ul>
				<navigator  
				class="item" 
				v-for="(song,index) in singerDetailList" 
				:key="index"
				:url="'/pages/player/player?song=' + encodeURIComponent(JSON.stringify(song))"
				>
					<view class="list">
						<h2 class="name">{{song.name}}</h2>
						<p class="desc">{{song.ar[0].name}}</p>
					</view>
				</navigator>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				singerDetailList: [],
				list: []
			}
		},
		computed:{
			bgStyle(){
				return `background-image: url(${this.list.picUrl})`
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.list = item
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + `/artists?id=${item.id}`,
				method: "GET",
				success: (res) => {
					if(res.data.code === 200){
						this.singerDetailList = res.data.hotSongs
						console.log(this.singerDetailList)
					}
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>
@import url("singer-detail.css");
</style>
